<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 这是搜索框 -->
      <el-row class="search">
        <div class="search-left">
          <span>学科名称</span>
          <el-input size="small" v-model="searchInput"></el-input>
          <el-button size="small" @click="clearSearch">清除</el-button>
          <el-button type="primary" size="small" @click="onSearchSubject(1)"
            >搜索</el-button
          >
        </div>
        <div class="search-right">
          <el-button
            class="el-icon-edit"
            type="success"
            size="small"
            @click="addSubjectList"
          >
            新增学科</el-button
          >
        </div>
      </el-row>
      <!-- 搜索框结束 -->

      <!-- 这是提示 -->
      <el-row class="data-tips">
        <i class="el-icon-info"></i>
        数据一共 {{ totalLength }} 条
      </el-row>
      <!-- 提示结束 -->

      <!-- 这是表单 -->
      <el-table :data="subjectList" style="width: 100%">
        <el-table-column type="index" label="序号" width="48">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <div v-if="scope.row.isFrontDisplay === 1">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <button
              @click="jumpDirectorys(scope.row.id, scope.row.subjectName)"
            >
              <span>学科分类</span>
            </button>
            <button @click="jumpTags(scope.row.id, scope.row.subjectName)">
              <span>学科标签</span>
            </button>
            <button @click="reviseSubjectList(scope.row)">
              <span>修改</span>
            </button>
            <button @click="deleteSubjectList(scope.row.id)">
              <span>删除</span>
            </button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 这是表单结束 -->

      <!-- 这是分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange(searchInput, $event)"
          @current-change="handleCurrentChange(searchInput, $event)"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="totalLength"
        >
        </el-pagination>
      </div>
      <!-- 这是分页结束 -->

      <!-- 这是增加学科的模板 -->
      <el-dialog
        closed="closeAdd"
        ref="clearAdd"
        title="新增学科"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form" :rules="addSubjectRules" prop="form">
          <el-form-item label="学科名称" prop="name" label-width="80px">
            <el-input
              v-model="form.name"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示" label-width="80px">
            <el-switch
              v-model="addSwitch"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onAddSubjectList">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 这是增加学科的模板结束 -->

      <!-- 这是修改学科的模板 -->
      <el-dialog
        close="closeAdd"
        ref="clearAdd"
        title="修改学科"
        :visible.sync="reviseSubject"
      >
        <el-form :model="form" :rules="addSubjectRules" prop="form">
          <el-form-item label="学科名称" prop="reviseName" label-width="80px">
            <el-input
              v-model="form.reviseName"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示" label-width="80px">
            <el-switch
              v-model="addSwitch"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reviseSubject = false">取 消</el-button>
          <el-button type="primary" @click="onAddReviseList">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 这是修改学科的模板结束 -->
    </div>
  </div>
</template>

<script>
import { simple, list, add, remove, update } from '../../api/hmmm/subjects.js'

export default {
  name: 'SubjectsPage',
  components: {},
  props: {},
  data() {
    return {
      // 这是简单的科学数据列表
      easySubjectList: [],
      subjectList: [],
      pageSize: 5,
      currentPage: 1,
      totalLength: 0,
      // 这是增加学科的数据
      reviseId: '',
      addSwitch: true,
      isOneTwo: 1,
      dialogFormVisible: false,
      reviseSubject: false,
      form: {
        name: '',
        reviseName: ''
      },
      addSubjectRules: {
        name: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      // 这是搜索的数据
      searchInput: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    // 这是获取科学列表的数据
    this.getSubjectList()
  },
  mounted() {},
  methods: {
    // 这是获取科学列表的数据
    async getSubjectList() {
      try {
        const { data } = await simple()
        this.easySubjectList = data
        this.totalLength = data.length
        const { data: res } = await list({
          page: this.currentPage,
          pagesize: this.pageSize,
          subjectName: ''
        })
        this.subjectList = res.items
      } catch (error) {
        this.$message.error('获取列表失败，请稍后刷新重试')
      }
    },
    async handleSizeChange(i, val) {
      this.pageSize = val
      if (i) {
        this.onSearchSubject()
      } else {
        this.getSubjectList()
      }
    },
    async handleCurrentChange(i, val) {
      this.currentPage = val
      if (i) {
        this.onSearchSubject()
      } else {
        this.getSubjectList()
      }
    },
    // 这是增加学科
    addSubjectList() {
      this.dialogFormVisible = true
    },
    async onAddSubjectList() {
      this.form.name.trim()
      await add({
        subjectName: this.form.name,
        isFrontDisplay: this.addSwitch ? 1 : 0
      })
      this.getSubjectList()
      this.dialogFormVisible = false
      this.form.name = ''
      this.addSwitch = true
    },
    closeAdd() {
      this.addSwitch = true
      this.$refs.clearAdd.resetFields()
    },
    // 这是搜索学科
    clearSearch() {
      this.searchInput = ''
    },
    async onSearchSubject(v) {
      if (v === 1) {
        this.currentPage = 1
        this.pageSize = 5
      }
      if (this.searchInput === '') {
        this.getSubjectList()
      } else {
        const { data } = await list({
          page: this.currentPage,
          pagesize: this.pageSize,
          subjectName: this.searchInput
        })
        this.subjectList = data.items
        this.totalLength = data.counts
      }
    },
    // 这是修改学科列表
    async reviseSubjectList(id) {
      this.isOneTwo = id.isFrontDisplay
      if (id.isFrontDisplay === 1) {
        this.addSwitch = true
      } else {
        this.addSwitch = false
      }
      this.reviseId = id.id
      this.form.reviseName = id.subjectName
      this.reviseSubject = true
    },
    async onAddReviseList() {
      if (this.addSwitch) {
        this.isOneTwo = 1
      } else {
        this.isOneTwo = 0
      }
      try {
        const { data } = await update({
          id: this.reviseId,
          isFrontDisplay: this.isOneTwo,
          subjectName: this.form.reviseName
        })
        if (!data.success) {
          return this.$message.error('修改用户失败')
        }
        this.$message.success('修改用户成功')
        this.getSubjectList()
      } catch (error) {
        this.$message.error('修改失败，请稍后再试')
      }
      this.reviseSubject = false
    },
    // 这是删除学科列表
    async deleteSubjectList(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data } = await remove({ id: id })
      if (!data.success) {
        return this.$message.error('删除用户失败')
      }
      this.$message.success('删除用户成功')
      this.getSubjectList()
    },
    // 这是跳到 学科目录
    jumpDirectorys(id, subjectName) {
      this.$router.push({
        name: 'subjects-directorys',
        params: { id: id, subjectName: subjectName }
      })
    },
    jumpTags(id, subjectName) {
      this.$router.push({
        name: 'subjects-tags',
        params: { id: id, subjectName: subjectName }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: -9px -8px;
  .app-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .search {
      .search-left {
        float: left;
        span {
          display: inline-block;
          text-align: right;
          line-height: 32px;
          width: 80px;
          height: 32px;
          font-size: 14px;
          color: #606266;
          padding: 0 12px 0 0;
          font-weight: 700;
        }
        .el-input {
          width: 200px;
          height: 32px !important;
          line-height: 32px;
          margin-right: 10px;
        }
        .el-button {
          display: inline-block;
          padding: 9px 15px;
          font-size: 12px;
        }
      }
      .search-right {
        float: right;
      }
    }
    .search::before,
    .search::after {
      content: '';
      display: table;
    }
    .search::after {
      clear: both;
    }

    .data-tips {
      display: block;
      background-color: #f4f4f5;
      color: #909399;
      width: 100%;
      font-size: 13px;
      margin-bottom: 15px;
      margin-top: 20px;
      border-radius: 4px;
      padding: 11px 16px;
      i {
        display: inline-block;
        font-size: 16px;
        line-height: 1;
        font-variant: normal;
        margin-right: 5px;
      }
    }

    .el-table {
      .el-table-column {
        width: 0;
        padding: 0 80px;
      }
      button {
        border: none;
        outline: none;
        background-color: transparent;
        cursor: pointer;
      }

      span {
        color: #409eff;
      }
    }

    ::v-deep .pagination {
      margin-top: 20px;
      text-align: right;
      .el-pagination__sizes {
        margin-right: -16px;
      }
    }
    ::v-deep .el-dialog {
      width: 400px;
    }
    ::v-deep .el-form-item__label {
      width: 80px !important;
    }
    ::v-deep .el-input__inner {
      height: 32px;
    }
    .dialog-footer {
      text-align: right;
    }
  }
}
</style>
